<template>
  <view class="page">
    <customtop top_title="项目详情"></customtop>
    <view class="abb_show" v-if="!loading">
      <view class="">
        <view class="pagebox topinfo">
          <view class="name">{{ abb.title }}</view>
          <view class="price price_color none"
            >项目加盟费：¥{{ abb.jiamengfei }}</view
          >
        </view>

        <view class="pagebox typelist">
          <view class="bd">
            <view class="it1">割必赔</view>
            <view class="it1">项目已上押：{{ abb.deposit }}元</view>
            <view class="items">
              <view class="item"
                ><span class="span span1">浏览次数</span
                ><span class="span span2">{{ abb.click }}</span></view
              >
              <view class="item"
                ><span class="span span1">项目编号</span
                ><span class="span span2">{{ abb.id }}</span></view
              >
              <view class="item"
                ><span class="span span1">达成意向</span
                ><span class="span span2">占位</span></view
              >
              <view class="item"
                ><span class="span span1">发布时间</span
                ><span class="span span2">{{ abb.created_at_show }}</span></view
              >
              <view class="item none"
                ><span class="span span1">项目加盟费</span
                ><span class="span span2">¥{{ abb.jiamengfei }}</span></view
              >
              <view class="item none"
                ><span class="span span1">项目保证金</span
                ><span class="span span2">¥{{ abb.deposit }}</span></view
              >
            </view>
          </view>
        </view>

        <view class="pagebox flow" v-if="abb.deposit > 0">
          <view class="stitle">任务流程</view>
          <view class="bd">
            <view class="line"></view>
            <view class="items">
              <view class="item">
                <span class="span span1">
                  <i class="iconfont icon-dahaoxuanzhongbeijingeps"></i>
                </span>
                <span class="span span2">确定合作</span>
              </view>
              <view
                class="item"
                v-for="(item, index) in config.abb.nodes"
                :key="index"
                v-if="index < 4"
              >
                <span>
                  <span class="span span1">
                    <i class="iconfont icon-dahaoxuanzhongbeijingeps"></i>
                  </span>
                  <span class="span span2">{{ item.name }}</span>
                </span>
              </view>
            </view>
          </view>
        </view>

        <view class="pagebox content">
          <view class="stitle">详情描述</view>
          <view class="bd">
            <view v-for="(item, index) in abb.attributes" :key="index">
              <view class="item">
                <span>{{ item.name }}：</span>
                <span
                  class="span_item"
                  v-for="(item_value, index_value) in item.values"
                  :key="index_value"
                >
                  {{ item_value }}
                </span>
              </view>
            </view>
            <rich-text :nodes="abb.content"></rich-text>
          </view>
        </view>

        <view class="pagebox images" v-if="abb.images.length > 0">
          <view class="stitle"><span class="txt">图片介绍</span></view>
          <view class="bd">
            <image
              mode="widthFix"
              :src="item.image"
              v-for="(item, index) in abb.images"
              :key="index"
              @click="previewImages(item.image)"
            />
          </view>
        </view>

        <view class="pagebox images" v-if="abb.deposit == 0">
          <view class="stitle"><span class="txt">风险提示</span></view>
          <view class="bd">
            <view class=""
              >建立合作之前，请务必签订合同，我们做为信息共享平台方，无法对信息的真实性及准确性做出判断不承担任何财产损失和法律责任.</view
            >
            <view class=""
              >若您不同意该提示，请关闭页面且不要在本平台拓展任何商业合作</view
            >
            <view class="">否则造成的任何损失由您个人承担</view>
          </view>
        </view>

        <view class="pagebox contact none" v-if="contact.is_get_contact == 1">
          <view class="stitle">联系方式</view>
          <view class="bd" v-if="contact.is_get_contact == 0">
            <view class="luckbtn luckbtn-default" @click="getContact"
              >查看联系方式</view
            >
            <view
              :style="{
                textAlign: 'center',
                color: '#999',
                marginTop: '30rpx',
              }"
            >
              今日还有
              <span class="text-danger count_number">{{
                contact.today_get_contact_count
              }}</span>
              次查看权限
            </view>
          </view>
          <view class="bd" v-if="contact.is_get_contact == 1">
            <view class="items">
              <view class="item">
                <span class="span1">微信：</span>
                <span class="span2">{{
                  abb.contact && abb.contact.weixin
                    ? abb.contact.weixin
                    : "未填写"
                }}</span>
                <span
                  class="span3"
                  @click="copy(abb.contact.weixin)"
                  v-if="abb.contact.weixin"
                  >复制</span
                >
              </view>
              <view class="item">
                <span class="span1">手机：</span>
                <span class="span2">{{
                  abb.contact && abb.contact.phone
                    ? abb.contact.phone
                    : "未填写"
                }}</span>
                <span
                  class="span3"
                  @click="copy(abb.contact.phone)"
                  v-if="abb.contact.phone"
                  >复制</span
                >
              </view>
              <view class="item">
                <span class="span1">Q Q：</span>
                <span class="span2">{{
                  abb.contact && abb.contact.qq ? abb.contact.qq : "未填写"
                }}</span>
                <span
                  class="span3"
                  @click="copy(abb.contact.qq)"
                  v-if="abb.contact.qq"
                  >复制</span
                >
              </view>
              <view class="item">
                <span class="span1">电话：</span>
                <span class="span2">{{
                  abb.contact && abb.contact.telphone
                    ? abb.contact.telphone
                    : "未填写"
                }}</span>
                <span
                  class="span3"
                  @click="copy(abb.contact.telphone)"
                  v-if="abb.contact.telphone"
                  >复制</span
                >
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="foot_action_blank"></view>
    <view class="foot_action">
      <view class="container">
        <view class="left none">
          <view class="item" @click="switchTab('/pages/index/index')">
            <i class="iconfont icon-shouye"></i>
            <view class="txt">首页</view>
          </view>
          <view
            class="item"
            @click="jumpPage('/pages/im/friend_index?id=' + abb.user_id)"
          >
            <i class="iconfont icon-kefu2"></i>
            <view class="txt">咨询</view>
          </view>
        </view>
        <view class="left"> 立即报名 被割必赔 </view>
        <view class="right" v-if="abb.deposit > 0">
          <view class="btn" @click="apply()" v-if="abb.is_apply == 0"
            >立即报名</view
          >
          <view
            class="btn"
            @click="jumpPage('/pages/abb/order_show?id=' + order.id)"
            v-if="abb.is_apply == 1"
            >查看进度</view
          >
        </view>
        <view class="right" v-if="abb.deposit == 0">
          <view class="btn" @click="getContact()">查看联系方式</view>
        </view>
      </view>
    </view>

    <u-popup
      mode="center"
      round="3"
      :show="contact_popup_show"
      @close="onClose_contact_popup"
    >
      <view class="contact_popup">
        <view class="box">
          <view class="tip1">今日免费次数已用完</view>
          <view class="tip2">可获取更多查看次数</view>
          <view class="btns">
            <button class="btn btn1" @click="getContact_one">单次查看</button>
          </view>
          <view class="tip3"
            >单次查看需消耗{{ config.abb.contact_gold }}金币</view
          >
        </view>
      </view>
    </u-popup>

    <u-popup
      mode="center"
      round="3"
      :show="contacta_popup_show"
      @close="onClose_contacta_popup"
      customStyle="background-color: transparent;"
      v-if="contact.is_get_contact == 1"
    >
      <view class="contacta_popup">
        <view class="box">
          <view class="stitle">联系方式</view>
          <view class="items">
            <view class="item">
              <span class="span1">微信：</span>
              <span class="span2">{{
                abb.contact && abb.contact.weixin
                  ? abb.contact.weixin
                  : "未填写"
              }}</span>
              <span
                class="span3"
                @click="copy(abb.contact.weixin)"
                v-if="abb.contact.weixin"
                >复制</span
              >
            </view>
            <view class="item">
              <span class="span1">手机：</span>
              <span class="span2">{{
                abb.contact && abb.contact.phone ? abb.contact.phone : "未填写"
              }}</span>
              <span
                class="span3"
                @click="copy(abb.contact.phone)"
                v-if="abb.contact.phone"
                >复制</span
              >
            </view>
            <view class="item">
              <span class="span1">Q Q：</span>
              <span class="span2">{{
                abb.contact && abb.contact.qq ? abb.contact.qq : "未填写"
              }}</span>
              <span
                class="span3"
                @click="copy(abb.contact.qq)"
                v-if="abb.contact.qq"
                >复制</span
              >
            </view>
            <view class="item">
              <span class="span1">电话：</span>
              <span class="span2">{{
                abb.contact && abb.contact.telphone
                  ? abb.contact.telphone
                  : "未填写"
              }}</span>
              <span
                class="span3"
                @click="copy(abb.contact.telphone)"
                v-if="abb.contact.telphone"
                >复制</span
              >
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { request, upload } from "@/utils/http.js";
import customtop from "@/components/customtop.vue";
export default {
  components: { customtop },

  data() {
    return {
      loading: true,
      abb: {
        images: [],
        contact: {},
      },
      order: {},
      contact: {},
      contact_popup_show: false,
      contacta_popup_show: false,
      config: {
        abb: {
          contact: {},
        },
      },
    };
  },

  onLoad(options) {
    this.id = options.id;
    uni.showLoading();
    this.getAbb();

    request.post("/common/getConfig").then((res) => {
      this.config = res.data;
    });
  },

  onShow: function () {
    request.post("/user/getLoginUser").then((res) => {
      this.loading = false;
      if (!res.data.id) {
        let that = this;
        uni.showModal({
          title: "提示",
          content: "需先登录",
          success: function (res) {
            if (res.confirm) {
              uni.navigateTo({ url: "/pages/account/login_password" });
            } else {
              uni.navigateBack();
            }
          },
        });
      }
    });
  },

  methods: {
    apply: function (id) {
      let that = this;
      uni.showModal({
        title: "提示",
        content:
          "项目加盟费为" + that.abb.jiamengfei + "元，请确认账户余额充足",
        success(res) {
          if (res.confirm) {
            uni.showLoading();
            request.post("/abb/apply", { id: that.abb.id }).then((res) => {
              uni.hideLoading();
              if (res.code == 200) {
                that.getAbb();
                uni.showToast({ title: "报名成功", icon: "none" });
              } else if (res.code == 400) {
                uni.showModal({ showCancel: false, content: res.message });
              } else {
                uni.showToast({ title: "操作失败", icon: "none", mask: true });
              }
            });
          }
        },
      });
    },

    getAbb: function () {
      request.post("/abb/getAbb", { id: this.id }).then((res) => {
        uni.hideLoading();
        this.loading = false;
        this.abb = res.data.abb;
        this.contact = res.data.contact;
        if (![3].includes(this.abb.status)) {
          uni.showModal({
            showCancel: false,
            content: "项目审核中",
            success: function (res) {
              if (res.confirm) {
                uni.navigateBack();
              }
            },
          });
        }
        this.order = res.data.order;
      });
    },

    getContact_one: function () {
      let that = this;
      that.contact_popup_show = false;
      uni.showModal({
        title: "提示",
        content:
          "单次查看将消耗" + that.config.abb.contact_gold + "金币，确认查看？",
        success(res) {
          if (res.confirm) {
            uni.showLoading();
            request
              .post("/abb/getContact", { id: that.abb.id, way: 2 })
              .then((res) => {
                uni.hideLoading();
                if (res.code == 200) {
                  uni.showToast({ title: "已查看", icon: "none" });
                  that.getAbb();
                  that.contacta_popup_show = true;
                } else if (res.code == 400) {
                  uni.showToast({
                    title: res.message,
                    icon: "none",
                  });
                } else if (res.code == 4001) {
                  that.contact_popup_show = true;
                }
              });
          }
        },
      });
    },

    getContact: function () {
      if (this.contact.is_get_contact == 1) {
        this.contacta_popup_show = true;
        return false;
      }

      let that = this;
      that.contact_popup_show = false;
      uni.showModal({
        title: "提示",
        content: "确认查看联系方式？",
        success(res) {
          if (res.confirm) {
            uni.showLoading();
            request
              .post("/abb/getContact", { id: that.abb.id, way: 1 })
              .then((res) => {
                uni.hideLoading();
                if (res.code == 200) {
                  uni.showToast({ title: "已查看", icon: "none" });
                  that.getAbb();
                  that.contacta_popup_show = true;
                } else if (res.code == 400) {
                  uni.showToast({
                    title: res.message,
                    icon: "none",
                  });
                } else if (res.code == 4001) {
                  that.contact_popup_show = true;
                }
              });
          }
        },
      });
    },

    onClose_contact_popup: function () {
      this.contact_popup_show = false;
    },

    previewImages: function (current) {
      let urls = [];
      this.abb.images.map((item, index) => {
        urls.push(item.image);
      });
      uni.previewImage({
        current: current,
        urls: urls,
      });
    },

    onClose_contacta_popup: function () {
      this.contacta_popup_show = false;
    },

    copy: function (content) {
      uni.setClipboardData({ data: content });
    },

    switchTab: function (url) {
      uni.switchTab({ url: url });
    },

    jumpPage: function (url) {
      uni.navigateTo({ url: url });
    },
  },
};
</script>

<style>
@import url("abb.css");
.page {
  background-color: #fff;
  padding-bottom: 30rpx;
}
</style>
